<template>
	<div class="home-header">

		<router-link tag="div" class="header-left border-right" to="/">
			<i class="fa fa-cloud" aria-hidden="true" />
			单位共享
		</router-link>
		<div class="header-right">
			<a class="header-btn-left" href="./desktop" @contextmenu="showRightMenu">
				<i class="fa fa-desktop" aria-hidden="true"></i>
				桌面
			</a>
			<a class="header-btn-left active" href="#">
				<i class="fa fa-bars" aria-hidden="true"></i>
				文件管理
			</a>
			<a class="header-btn-left" href="#">
				<i class="fa fa-windows" aria-hidden="true"></i>
			</a>
			<a class="header-btn-right user-menu" href="#"  @click="getUserMenu">
				<i class="fa fa-user" aria-hidden="true"></i>
				{{username}}
				<i class="fa fa-caret-down" aria-hidden="true"></i>
			</a>
			<a class="header-btn-right lang" href="#" @click="getLangMenu">
				<i class="fa fa-flag" aria-hidden="true"></i>
				<i class="fa fa-caret-down" aria-hidden="true"></i>
			</a>
		</div>
		<el-container>
		  <el-header>Header</el-header>
		  <el-main>Main</el-main>
		  <el-footer>Footer</el-footer>
		</el-container>
		<el-row>
		  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
		  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
		</el-row>


	</div>
</template>

<script>
export default {
  name:'HomeHeader',
  components:{
  },
   data () {
  	return {
  		username: 'name'
  	}
  },
  methods: {
  	getUserMenu () {

  	},
  	getLangMenu () {

  	},
  	showRightMenu (param) {
			param.preventDefault()  
  	}
  }
}

</script>
<style lang="stylus">
	@import '~styles/varibles.styl'
	.home-header {
		height: $headerTopPC
		border-bottom: 1px solid #eee
		background: red
		.header-left {
			width: $headerLeftWidthPC
			height: 100%
			line-height: $headerTopPC
			text-align: center
			background: #fff
			font-size: $headerTopPC * 0.5
			color: #666
			border-right: 1px solid #eee
			cursor: pointer
			// background: linear-gradient(to bottom,#fff 0%,#ddd 50%,#fff)
			float: left
		}
		
		.header-right {
			overflow: hidden
			height: 100%
			line-height: $headerTopPC
			text-align: center
			background: #fff
			font-size: $headerTopPC * 0.4
			
			i {
				padding-right: .2em
			}
			.header-btn-left {
				overflow: hidden
				padding: 0 1.2em
				float: left
				color: #666
				border-right: 1px solid #eee
				transition: all .2s
				
				&:hover , &.active {
					background: #eee
				}
			}
			
			.header-btn-right {
				overflow: hidden
				padding: 0 .6em
				float: right
				border-left: 1px solid #eee
				color: #666
			}
		}
	}
	
</style>
